<template>
	<view class="container">
		<Masks v-if="show_qrcode"></Masks>
		<view class="list-item">
			<view class="dis-flex" @click="navTo('/pages/course/detail_text?id='+info.course_info.id)">
				<view class="list-img">
					<image :src="info.goods_snap.discover" mode="aspectFill"></image>
				</view>
				<view class="list-title">
					<view class="list-title-name">{{info.goods_snap.title}}</view>
					
					<view class="list-date">下单日期:{{info.xd_date}}</view>
					<view class="list-op">
						<view class="font-w600">{{info.goods_snap.score}}积分</view>
					</view>
				</view>
				
			</view>
			<view  class="line"></view>
			<view style="display: flex;margin: 24rpx;flex-direction: column;" class="font-s-14">
				<view class="dis-flex">
					<view style="flex:1">订单编号</view>
					<view><text class="font-color-9">{{info.order_sn}}</text><text class="font-color-9" style="margin: 0rpx 20rpx;">|</text><text @click="clipData(info.order_sn)">复制</text></view>
				</view>
				<view class="dis-flex margin-t-20">
					<view style="flex: 1;">下单时间</view>
					<view class="font-color-9">{{info.created_at}}</view>
				</view>
				
			</view>
		</view>
	
		<view class="bottom-view">
			<view class="btn" @click="openDial()">联系商家</view>
			<view class="btn" @click="openVerify()" v-if="info.status==1" style="padding: 2rpx 40rpx;">核销</view>
		</view>
		<uni-popup ref="popup"  background-color="#fff">
			<view class="popup-content">
				<view @click="makePhone()" style="height: 100rpx;">呼叫 {{info.shop_info.contact}}</view>
				<view @click="cancelPop()">取消</view>
			</view>
		</uni-popup>
		<!-- <view v-if="show_qrcode" style="margin: 56rpx;position: absolute;top: 20%;z-index: 2;border-radius: 16rpx;background: #FFFFFF"> -->
		<view v-if="show_qrcode" class="qr-tc">
			<view style="padding: 40rpx;text-align: center;font-weight: bold;display: flex;">
				<text style="flex: 1;"></text>
				<text>店家微信扫描核销二维码</text>
				<text @click="closeVerify()" class="cell-icon yticon icon-jia2" style="transform: rotate(45deg); display: inline-block;flex: 1;font-size: 44rpx"></text>
			</view>
			<view>
				<!-- <image src="/static/temp/qrcode.png" mode="aspectFit"></image> -->
				<uv-qrcode ref="qrcode"   size="300px" :value="qrhttp" :options="options2"></uv-qrcode>
			</view>
			<view style="text-align: center;padding: 60rpx;"><text>核销券码</text><text style="margin-left: 10rpx;">{{info.verify_code}}</text></view>
		</view>
		
	</view>
</template>

<script>
	import Api from '@/common/api';
	import Masks from '@/components/mask';
	export default {
		components: {
			Masks
		},
		data() {
			return {
				order_id:0,
				info:{},
				show_qrcode:false,
				options2: {
					useDynamicSize: true,
					errorCorrectLevel: 'Q',
					margin: 60,
					// 指定二维码前景，一般可在中间放logo
					// foregroundImageSrc: 'https://www.uvui.cn/common/logo.png'
				},
				qrhttp:''
			}
		},
		
		onLoad(option) {
			this.order_id =option.id
			// this.order_id=38;
			this.getDetail();
		},
		
		methods: {
			async getDetail() {
				let params = {
					o_id: this.order_id,
				}
				let data = await Api.apiCall('get', Api.apiName.goods_order_detail, params,true);
				if (!data || data.code != 0) {
					return;
				}
				this.info = data.data;
				uni.setNavigationBarTitle({
					title:data.data.status_tip
				});
				this.qrhttp=data.data.qrhttp
			},
			clipData(c_data){
				uni.setClipboardData({
					data:c_data,
					showToast:true
				})
			},
			makePhone(){
				uni.makePhoneCall({
					phoneNumber:this.info.shop_info.contact
				})
			},
			openDial(){
				this.$refs.popup.open('bottom')
			},
			cancelPop(){
				this.$refs.popup.close();
			},
			openVerify(){
				this.show_qrcode=true;
			},
			closeVerify(){
				this.show_qrcode=false;
			},
		},


	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}
	
	.container {
		height: 100vh;
		overflow: auto;
	}
	.dis-flex{
		display: flex;
	}
	.list-item {
		display: flex;
		background: #FFFFFF;
		margin: 24rpx;
		border-radius: 20rpx;
		flex-direction: column;
	}
	
	.list-img {
		padding: 20rpx;
		image {
			display: inline-block;
			width: 230rpx;
			height: 230rpx;
			border-radius: 20rpx;
		}
	}
	
	.list-title {
		margin-left: 20rpx;
		margin-top: 30rpx;
		font-size: 14px;
		width:100%;
	}
	
	.list-title-name {
		font-size: 30rpx;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		width: 414rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.list-detail {
		display: flex;
		color: #999999;
		margin-top: 24rpx;
	}
	
	.list-date {
		color: #999999;
		margin-top: 40rpx
	}
	
	.list-op {
		margin-top: 30rpx;
		display: flex;
		color: #ff0000;
		align-items: center;
	}
	.pad-r22{
		padding-right: 22rpx;
	}
	.font-w600{
		font-weight: 600;
	}
	.sign-coin-detail{
		margin-left: 14rpx;
		font-size: 20rpx;
		border: 1px solid #ff0000;
		padding: 4rpx
	}
	.order-status{
		font-size: 30rpx;
		color:#999999;
	}
		
	.line{
		height: 2rpx;
		background: #ECECEC;
		width: 90%;
		margin: 10rpx auto;
	}
	.font-s-14{
		font-size: 28rpx;
	}
	.margin-t-20{
		margin-top: 20rpx;
	}
	.font-color-9{
		color: #999999;
	}
	.bottom-view{
		position: absolute;
		bottom: 0rpx;
		height: 100rpx;
		background: #f5f5f5;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.2);
	}
	.btn{
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		border: 1px solid #0191FF;
		margin: 18rpx 20rpx 18rpx 10rpx;
		padding: 2rpx 16rpx;
		color: #0191FF;
		font-size: 26rpx;
	}

	.popup-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px;
		
		background-color: #fff;
	}

	.uni-pop .uni-popup__wrapper{
		border-top-left-radius:10rpx !important;
		border-top-right-radius:10rpx !important;
	}
	.cpt-mask {
		top: 0rpx !important;
	}
	.qr-tc{
		position: absolute;
		top: 50%;
		z-index: 2;
		border-radius: 16rpx;
		background: #FFFFFF;
		transform:translate(-50%,-50%);
		left: 50%;
	}
</style>